<template>
  <div class="page-container">
    <van-cell-group>
      <van-field
        ref="scanDom"
        v-model="scan"
        label=""
        left-icon="scan"
        style="background-color:lightYellow"
        placeholder="扫描货位/物品码"
        size="large"
        clearable
        border
        @keyup.enter.native="handleScanOver"
        @clear="handleScanClear"
        @click-left-icon="handleScanClear"
      />

      <van-field label="货位号:" label-align="right" v-model="location.code" size="mini" disabled />
      <van-field label="货位名称:" label-align="right" v-model="location.name" size="mini" disabled />
    </van-cell-group>
    <van-divider><span style="font-size:9px">上架明细</span></van-divider>
    <div class="items-container">
      <pick-item propTitleMode />
      <pick-item
        v-for="item in rackingItems"
        :key="item.id"
        :value="item"
        @remove-item="handleRemoveItem(item)"
      />
    </div>
    <div class="btn-container">
      <van-button
        type="primary"
        :disabled="cpButtonDisable"
        @click="handleComplete"
        style="margin-top:10px"
      >完成上架</van-button>
    </div>
  </div>
</template>

<script>
import PickItem from '../pick/PickItem.vue'

export default {
  data() {
    return {
      scan: '',
      location: {},
      rackingItems: []
    }
  },
  props: {
    propFlowKey: String
  },
  mounted() {
    this.$refs.scanDom.focus()
  },
  computed: {
    cpButtonDisable() {
      return !this.location.id || this.rackingItems.length < 1
    }
  },
  methods: {
    handleScanClear(event) {
      this.scan = ''
    },
    getScanType(source) {
      const prefix2 = source.substring(0, 2)
      if (prefix2 == 'LC') {
        return 'locationCode'
      } else if (prefix2 == 'F4') {
        return 'rfid'
      } else  {
        return 'sn'
      }
    },
    handleScanOver() {
      if (window.isPDAScan()) this.scan = window.getPDAScan()
      if (!this.scan) return
      const scanType = this.getScanType(this.scan)
      if (scanType == 'locationCode') {
        this.handleReceiveLocation(this.scan)
      } else {
        this.handleReceiveUC(this.scan, scanType)
      }
    },
    handleReceiveLocation(lc) {
      const params = {
        warehouseId: this.$store.getters.currentWarehouse.id,
        locationCode: lc
      }
      this.utils.loadShow()
      this.$ajax.get('/base/location/getByCode', { params }).then(response => {
        this.utils.loadHide()
        if (response.success) {
          this.location = response.data
          this.resetScan()
        }
      }).catch(err => {
        this.utils.loadHide()
      })
    },
    handleReceiveUC(uc, ucType) {
      const params = {
        warehouseId: this.$store.getters.currentWarehouse.id,
        uc,
        ucType
      }
      this.utils.loadShow()
      this.$ajax.get('/wm/stock/getStockByUC', { params }).then(response => {
        this.utils.loadHide()
        if (response.success) {
          this.addRackingItems(response.data)
          this.resetScan()
        }
      }).catch(err => {
        this.utils.loadHide()
      })
    },
    addRackingItems(stock) {
      if (!this.rackingItems.find(item => item.id == stock.id)) {
        this.rackingItems.unshift(stock)
      }
    },
    handleRemoveItem(stock) {
      this.rackingItems.map((item, index) => {
        if (item.id == stock.id) {
          this.rackingItems.splice(index, 1)
          return true
        }
      })
    },
    handleComplete() {
      if (!this.location.id) {
        this.$notify.warning('请先扫描库位号！')
        return
      }
      if (this.rackingItems.length < 1) {
        this.$notify.warning('请扫描唯一码，至少添加一条上架明细！')
        return
      }
      const params = {
        locationId: this.location.id,
        rackingItems: this.rackingItems
      }
      this.utils.loadShow()
      this.$ajax.post('/wm/stock/racking', params).then(response => {
        this.utils.loadHide()
        if (response.code == 0) {
          this.$notify.success('上架完成！')
          this.clearForm()
        }
      }).catch(err => {
        this.utils.loadHide()
      })
    },
    resetScan() {
      this.scan = ''
      this.$refs.scanDom.focus()
    },
    clearForm() {
      this.location = {}
      this.rackingItems = []
      this.resetScan()
    }
  },
  components: {
    PickItem
  }

}
</script>

<style lang="scss" scoped>
  .items-container {
    min-height: 200px;
  }
  .btn-container {
    padding:10px;
    flex-direction:column ;
    display: flex;
    justify-content: space-between;
  }
</style>
